<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				height: 100%;
			}
			
			.mui-icon {
				font-size: 20px;
				color: #f16456;
			}
			
			.mui-bar-nav {
				background: #f16456;
				height: 58px;
			}
			
			.mui-action-back,
			.mui-title,
			.mui-action-back:active {
				color: #FFFFFF;
			}
			
			.mui-bar .mui-title,
			.mui-btn-link {
				margin-top: 18px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 58px;
			}
			
			.mui-content {
				background-image: url(../images/homeBg.png);
				background-repeat: no-repeat;
				background-size: cover;
				min-height: 100%;
			}
			
			.mui-row {
				margin-top: 10px;
			}
			
			.mui-row .mui-col-xs-12 img {
				max-width: 380px;
			}
			
			.setting {
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #f16456;
				border-radius: 10px;
				height: 115px;
				width: 200px;
				position: absolute;
				z-index: 4;
			}
			
			.keyboard {
				margin: auto;
				padding: 0px;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background-color: #efb4ae;
				border-radius: 10px;
				height: 170px;
				width: 220px;
				position: absolute;
				z-index: 2;
			}
			
			.keyboard input {
				width: 30px;
				height: 30px;
				margin: 0px 1px;
				padding: 0px;
				text-align: center;
			}
			
			.keyboard button {
				width: 50px;
				margin-top: 2px;
			}
			
			.keyboard button:active {
				background-color: #de7c79;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-icon mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-btn-link mui-pull-right" onclick="(function(){vm.show=true})();"><span class="mui-icon mui-icon-more" style="color: #FFFFFF;"></span></a>
			<h1 class="mui-title" id="title">游戏大厅</h1>
		</header>
		<div class="mui-content" id="bizVue">
			<div class="mui-row" style="color: white;" v-show="tips != null && tips.trim() != ''">
				<span class="mui-col-xs-2 mui-text-right iconfont icon-gonggao" style="font-size: 25px;">&nbsp;</span>
				<marquee scrollamount="4" class="mui-col-xs-10">{{tips}}</marquee>
			</div>
			<div class="mui-row" v-for="item in centers">
				<div class="mui-col-xs-12 mui-text-center">
					<img src="../images/vipCenter.png" class="mui-col-xs-10" @click="vipRooms(item)" v-if="item.centerName.startWith('VIP')" />
					<img src="../images/center.png" class="mui-col-xs-10" @click="rooms(item)" v-else />
				</div>
			</div>
			<div class="mui-row">
				<div class="mui-col-xs-12 mui-text-center">
					<img src="../images/center.png" class="mui-col-xs-10" @click="createRoom" />
				</div>
			</div>
			<div :class="{'setting':true, 'mui-hidden':!show}">
				<span class="mui-icon mui-icon mui-icon-close" style="float: right;color: #FFFFFF;" @click="close(0)"></span>
				<ul class="mui-table-view" style="margin-top: 30px;">
					<li class="mui-table-view-cell">
						<span>背景音乐</span>
						<div :class="{'mui-switch': true, 'mui-active': isPalyBg}" @click="setPlayBg">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<span>游戏音效</span>
						<div :class="{'mui-switch': true, 'mui-active': isPlayEffect}" @click="setPlayEffect">
							<div class="mui-switch-handle"></div>
						</div>
					</li>
				</ul>
			</div>
			<div :class="{'mui-hidden':!show}" style="width: 100%;height: 100%;position: absolute;background-color: black;top:0px;z-index: 3;opacity: 0.5;">
			</div>
			<div :class="{'keyboard':true, 'mui-hidden':!showPwd}">
				<span class="mui-icon mui-icon mui-icon-close" style="float: right;color: #FFFFFF;" @click="close(1)"></span>
				<div class="mui-row mui-text-center" style="clear: both;">
					<input type="text" readonly="readonly" v-model="roomPwd.num1" />
					<input type="text" readonly="readonly" v-model="roomPwd.num2" />
					<input type="text" readonly="readonly" v-model="roomPwd.num3" />
					<input type="text" readonly="readonly" v-model="roomPwd.num4" />
					<input type="text" readonly="readonly" v-model="roomPwd.num5" />
					<input type="text" readonly="readonly" v-model="roomPwd.num6" />
				</div>
				<div class="mui-row mui-text-center">
					<button type="button" @click="gotoVipRoom(1)">1</button>
					<button type="button" @click="gotoVipRoom(2)">2</button>
					<button type="button" @click="gotoVipRoom(3)">3</button>
					<button type="button" @click="gotoVipRoom(4)">4</button>
					<button type="button" @click="gotoVipRoom(5)">5</button>
					<button type="button" @click="gotoVipRoom(6)">6</button>
					<button type="button" @click="gotoVipRoom(7)">7</button>
					<button type="button" @click="gotoVipRoom(8)">8</button>
					<button type="button" @click="gotoVipRoom(9)">9</button>
					<button type="button" @click="gotoVipRoom(0)">0</button>
					<button type="button" @click="gotoVipRoom(100)">删除</button>
					<button type="button" @click="gotoVipRoom(101)">进入</button>
				</div>
			</div>
			<div :class="{'mui-hidden':!showPwd}" style="width: 100%;height: 100%;position: absolute;background-color: black;top:0px;z-index: 1;opacity: 0.5;">
			</div>
		</div>
		<audio id="bgMp3" src="../music/bg.mp3" loop="loop" />
		<audio id="roomMp3" src="../music/room.mp3" loop="loop" />
		<audio id="coinMp3" src="../music/coin.mp3" />
		<audio id="landmineMp3" src="../music/landmine.mp3" />
		<audio id="btnMp3" src="../music/btn.mp3" />
		<audio id="packetMp3" src="../music/packet.mp3" />

		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/public.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#bizVue',
				data: {
					tips: "",
					show: false,
					showPwd: false,
					isPalyBg: false,
					isPlayEffect: false,
					centers: [],
					curCenter: null,
					roomPwd: {
						num1: "",
						num2: "",
						num3: "",
						num4: "",
						num5: "",
						num6: ""
					}
				},
				mounted: function() {
					mui.plusReady(function() {
						var flag = plus.storage.getItem("isPalyBg");
						if(flag == null || flag == "1") {
							vm.isPalyBg = true;
							document.getElementById("bgMp3").play();
						}
						flag = plus.storage.getItem("isPlayEffect");
						if(flag == null || flag == "1") {
							vm.isPlayEffect = true;
						}

						//提醒
						setTimeout(function() {
							vm.tips = plus.storage.getItem("tips");
						}, 200);
						mui.postParam(CenterList, null, function(result) {
							if(result.code == 0) {
								vm.centers = result.centers;
							} else {
								mymui(result.msg);
							}
						});
					});
				},
				methods: {
					rooms: function(item) {
						mui.fire(plus.webview.currentWebview(), 'setMusic', {
							type: "btn"
						});
						mui.openWindow({
							id: "rooms",
							url: "rooms.html",
							extras: {
								center: item
							},
							waiting: {
								autoShow: false
							}
						});
					},
					vipRooms: function(item) {
						mui.fire(plus.webview.currentWebview(), 'setMusic', {
							type: "btn"
						});
						vm.showPwd = true;
						vm.curCenter = item;
					},
					gotoVipRoom: function(num) {
						mui.fire(plus.webview.currentWebview(), 'setMusic', {
							type: "btn"
						});
						if(num < 100) {
							if(vm.roomPwd.num1 == "") {
								vm.roomPwd.num1 = num.toString();
							} else if(vm.roomPwd.num2 == "") {
								vm.roomPwd.num2 = num.toString();
							} else if(vm.roomPwd.num3 == "") {
								vm.roomPwd.num3 = num.toString();
							} else if(vm.roomPwd.num4 == "") {
								vm.roomPwd.num4 = num.toString();
							} else if(vm.roomPwd.num5 == "") {
								vm.roomPwd.num5 = num.toString();
							} else if(vm.roomPwd.num6 == "") {
								vm.roomPwd.num6 = num.toString();
							}
						} else if(num == 100) {
							if(vm.roomPwd.num6 != "") {
								vm.roomPwd.num6 = "";
							} else if(vm.roomPwd.num5 != "") {
								vm.roomPwd.num5 = "";
							} else if(vm.roomPwd.num4 != "") {
								vm.roomPwd.num4 = "";
							} else if(vm.roomPwd.num3 != "") {
								vm.roomPwd.num3 = "";
							} else if(vm.roomPwd.num2 != "") {
								vm.roomPwd.num2 = "";
							} else if(vm.roomPwd.num1 != "") {
								vm.roomPwd.num1 = "";
							}
						} else if(num == 101) {
							var pwd = vm.roomPwd.num1 + vm.roomPwd.num2 + vm.roomPwd.num3 + vm.roomPwd.num4 + vm.roomPwd.num5 + vm.roomPwd.num6;
							if(pwd.length != 6) {
								mymui("请输入完整");
								return;
							}
							mui.postParam(GotoRoomVip, {
								roomPwd: pwd
							}, function(result) {
								if(result.code == 0) {
									vm.showPwd = false;
									vm.roomPwd = {
										num1: "",
										num2: "",
										num3: "",
										num4: "",
										num5: "",
										num6: ""
									}
									mui.openWindow({
										id: "room",
										url: "room.html",
										extras: {
											center: vm.curCenter,
											room: result.room
										},
										waiting: {
											autoShow: false
										}
									});
								} else {
									mymui(result.msg);
								}
							});
						}
					},
					createRoom: function() {
						mui.postParam(CreateRoom, null, function(result) {
							if(result.code == 0) {
								mui.openWindow({
									id: "room",
									url: "room.html",
									extras: {
										center: vm.curCenter,
										room: result.room
									},
									waiting: {
										autoShow: false
									}
								});
							} else {
								mymui(result.msg);
							}
						});
					},
					close: function(type) {
						if(type == 0) {
							vm.show = false;
						} else if(type == 1) {
							vm.showPwd = false;
						}
					},
					setPlayBg: function() {
						if(vm.isPalyBg) {
							document.getElementById("bgMp3").pause();
							vm.isPalyBg = false;
							plus.storage.setItem("isPalyBg", "0");
						} else {
							document.getElementById("bgMp3").play();
							vm.isPalyBg = true;
							plus.storage.setItem("isPalyBg", "1");
						}
					},
					setPlayEffect: function() {
						if(vm.isPlayEffect) {
							vm.isPlayEffect = false;
							plus.storage.setItem("isPlayEffect", "0");
						} else {
							vm.isPlayEffect = true;
							plus.storage.setItem("isPlayEffect", "1");
						}
					}
				}
			});

			//setMusic
			document.addEventListener('setMusic', function(event) {
				var type = event.detail.type;
				if(vm.isPalyBg) {
					if(type == "bg") {
						document.getElementById("bgMp3").currentTime = 0;
						document.getElementById("roomMp3").currentTime = 0;
						document.getElementById("roomMp3").pause();
						document.getElementById("bgMp3").play();
					} else if(type == "room") {
						document.getElementById("bgMp3").currentTime = 0;
						document.getElementById("roomMp3").currentTime = 0;
						document.getElementById("roomMp3").play();
						document.getElementById("bgMp3").pause();
					}
				}
				if(vm.isPlayEffect) {
					if(type == "btn") {
						document.getElementById("btnMp3").currentTime = 0;
						document.getElementById("btnMp3").play();
					} else if(type == "coin") {
						document.getElementById("coinMp3").play();
					} else if(type == "landmine") {
						document.getElementById("landmineMp3").play();
					} else if(type == "packet") {
						document.getElementById("packetMp3").play();
					}
				}
			});
		</script>
	</body>

</html>